<template>
 <ul class="list">
     <li class="item" 
        v-for="item in citylists.allCity" 
        :key="item.id" 
        @click="toAlpha"
        @touchstart="handleTouchStart"
        @touchMove="handleTouchMove"
        @touchEnd="handleTouchEnd"
    >
         {{item.indexes}}
    </li>
     
 </ul>
</template>

<script>
 export default {
     props:['citylists'],
     computed:{
         letters(){
             const letters=[];
             for(let i in this.cities){
                 letters.push(i)
             }
             return letters;
         }
     },
   data () {
     return {
         touchStatus:false
     }
   },
   methods:{
       toAlpha(e){
           this.$emit('change',e.target.innerText)
        //    console.log(e.target.innerText)
       },
       handleTouchStart(){
           this.touchStatus=true;
       },
       handleTouchMove(){
           if(touchStatus){

           }
       },
       handleTouchEnd(){
           this.touchStatus=false;
       },
   }
 }
</script>

<style scoped>
    .list{
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        top: 1.58rem;
        right: 0;
        bottom: 0;
        width: 0.4rem;
    }
    .item{
        line-height: .4rem;
        text-align: center;
        color: #00bcd4;
    }
</style>
